<template>
  <div class="iconlib-wrap">
    <template v-if="embedInput">
      <el-input
        :clearable="false"
        placeholder="请选择图标样式"
        v-model="seltIcon"
        :disabled="true"
      >
        <el-button
          slot="suffix"
          icon="el-icon-search"
          title="图标库"
          @click="showIconModal"
        />
      </el-input>
    </template>
    <el-button
      v-else
      icon="el-icon-search"
      title="图标库"
      @click="showIconModal"
    ></el-button>

    <el-dialog
      width="620px"
      :visible.sync="showModal"
      @close="handleCloseModal"
    >
      <template slot="title">
        <span class="el-dialog__title">
          <i class="el-icon-suitcase" /> 选择图标
        </span>
        <el-input
          class="icon-search"
          placeholder="请输入图标名称"
          v-model="searchVal"
          @input="handleSearchChange"
        />
      </template>
      <ul class="anticons-list">
        <li
          v-for="(icon, index) in searchedIcons"
          :key="`${icon}_${index}`"
          @click="handleSelectedIcon(icon)"
          :title="icon"
        >
          <i v-if="icon.startsWith('el-icon')" :class="icon" />
          <svg-icon
            v-else-if="icon.startsWith('svg-icon')"
            :icon-class="icon"
          />
        </li>
      </ul>
    </el-dialog>
  </div>
</template>

<script>
import svgIcons from "./svg-icons";
import elementIcons from "./element-icons";

export default {
  name: "IconSelectList",
  props: {
    value: {
      type: String,
    },
    //是否嵌入 Input 输入框
    embedInput: {
      type: Boolean,
      default: true,
    },
  },
  data() {
    return {
      showModal: false,
      allIcons: [],
      seltIcon: null,
      searchedIcons: [],
      searchVal: null,
    };
  },
  model: { prop: "value", event: "change" },
  watch: {
    //监听父组件传递过来的数据
    value: {
      deep: true,
      immediate: false,
      handler: function (newVal, oldVal) {
        if (!newVal && !oldVal) return false;
        this.seltIcon = newVal;
      },
    },
    //监听数据变化，及时提交给父组件
    seltIcon: {
      deep: true,
      immediate: false,
      handler: function (newVal, oldVal) {
        if (!newVal && !oldVal) return false;
        this.$emit("change", newVal);
      },
    },
  },
  created() {
    const allIcons = [];
    svgIcons.forEach((item) => allIcons.push("svg-icon-" + item));
    elementIcons.forEach((item) => allIcons.push("el-icon-" + item));
    this.searchedIcons = this.allIcons = allIcons;
  },
  methods: {
    showIconModal() {
      this.showModal = true;
      this.handleSearchChange("");
    },
    handleCloseModal() {
      this.showModal = false;
      this.searchVal = null;
    },
    handleSelectedIcon(icon) {
      this.seltIcon = icon;
      this.handleCloseModal();
    },
    handleSearchChange(value) {
      this.searchedIcons = this.allIcons.filter((x) => x.indexOf(value) > -1);
    },
  },
};
</script>

<style lang="scss" scoped>
.iconlib-wrap {
  ::v-deep .el-input__suffix {
    right: 0;
  }

  ::v-deep .el-dialog__header {
    text-align: left;
  }

  ::v-deep .el-dialog__body {
    padding: 0;
  }

  .anticons-list {
    height: 480px;
    overflow-y: auto;
    overflow-x: hidden;
    margin: 0;
    padding: 0;
    text-align: left;

    li {
      margin: 5px;
      display: inline-block;
      width: 50px;
      height: 50px;
      line-height: 50px;
      text-align: center;
      font-size: 36px;
      background-color: #e1e1e1;
      border-radius: 5px;
      cursor: pointer;
    }
    li:hover,
    .Selected {
      background-color: #1890ff;
      color: #fff;
      transform: scale(1.2);
      -webkit-transform: scale(1.2);
    }
  }

  .icon-search {
    width: 200px;
    float: right;
    margin-right: 50px;

    ::v-deep .el-input__inner {
      background-color: #fff;
      cursor: initial;
    }
  }
}
</style>